import classnames from 'classnames';
import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { Article } from '@/store/reducer/search';
import { useDispatch } from 'react-redux';
import dayjs from 'dayjs';
import { setArticleMarkActionCreator } from '@/store/action/article';
import history from '@/utils/history';
import { Image } from 'antd-mobile';

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  article: Article;
  calssName?: string;
}
export default function ArticleItem({ className, article, ...rest }: Props) {
  const dispatch = useDispatch();
  //   点击打开文章标记
  const handleSetMark = () => {
    dispatch(
      setArticleMarkActionCreator({ visible: true, article_id: article.art_id })
    );
  };

  // console.log(20, article);
  // 解构出封面类型和图片集合
  const { type, images } = article.cover;

  return (
    <div className={styles.root} {...rest}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        onClick={() => history.push(`/article/${article.art_id}`)}
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, index) => (
              <div className="article-img-wrapper" key={index}>
                {/* 通过antd的图片组件，实现懒加载和图片适应,异常图片 */}
                <Image src={item} lazy fit="cover"></Image>
                <img src={item} alt="" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        {/* <span>{dayjs(article.pubdate).format('YYYY-MM-DD')}</span> */}
        <span>{dayjs().from(article.pubdate)}</span>

        <span className="close" onClick={handleSetMark}>
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  );
}
